<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/public.css">
		<!-- 引入组件库 -->
		<script src="js/vue.v2.6.14.js .js"></script>
		<script src="js/index.js"></script>
		<script src="js/axios.v0.21.1.min.js"></script>
		<script src="js/url.js"></script>
		<script>
			let id = getUrlParam('id');
		</script>
	</head>
	<body>
		<div id="app">
			<!-- 面包屑 -->
			<el-row>
			  <el-col :span="24">
				  <el-breadcrumb separator="/">
				    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				    <el-breadcrumb-item><a href="/">类别管理</a></el-breadcrumb-item>
				    <el-breadcrumb-item><a href="/">大类管理</a></el-breadcrumb-item>
				    <el-breadcrumb-item>小类管理</el-breadcrumb-item>
					<el-breadcrumb-item>小类列表</el-breadcrumb-item>
				  </el-breadcrumb>
			  </el-col>
			</el-row>
			<el-divider></el-divider>
			<el-row class="margin-bottom">
			  <el-col :span="24">
				  <el-button size="small" @click="tosave" type="primary"><i class="el-icon-circle-plus-outline"></i> 添加小类</el-button>
			  </el-col>
			</el-row>
			<el-row>
			  <el-col :span="24">
				  <el-table size="small" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="tableData" style="width: 100%">
				  	<el-table-column prop="typeid" label="id" width="70" ></el-table-column>
				  	<el-table-column prop="typename" label="小类名称" width="180" ></el-table-column>
					<el-table-column prop="typedec" label="类别描述" ></el-table-column>
					<el-table-column label="管理菜单"  width="130" align="center">
						<template slot-scope="scope">
<!--							<el-button type="primary" round size="mini" @click="handleUpdate(scope.row.typeid)"><i class="el-icon-edit"></i></el-button>-->
							<el-button type="primary" round size="mini" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i></el-button>
							<el-button size="mini" round type="danger" @click="handleDelete(scope.row.typePid)"><i class="el-icon-delete"></i></el-button>
						</template>
					</el-table-column>
				  </el-table>
			  </el-col>
			</el-row>

			<!-- 	修改 -->
			<el-dialog title="修改类别" :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%">

				<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="小类名称" prop="type.typename">
						<el-input v-model="ruleForm.typename" style="width: 210px;"></el-input>
					</el-form-item>
					<el-form-item label="类别描述" prop="type.typedes">
						<el-input v-model="ruleForm.typedes" style="width: 210px;"></el-input>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
			</el-dialog>

		</div>
	</body>
	<script>
		// 创建根实例
		new Vue({
			el: '#app',
			data: {
				
				currentPage: 4,
				tableData: [
					{
						id: 1,
						typename: '',
						typeList: [{value: '', label: ''}]
					}
				],
				//修改对话框
				dialogVisible:false,
				//修改表单
				ruleForm: {
					typename:'',
					typedes:''
				},
			},
			created() {
				this.loadList();
			},
			methods: {
				loadList() {
					axios.get(`/type/${id}`).then(response=>{
						console.log(response.data);
						this.tableData = response.data;
					});
				},
				/* 修改回显类别信息 */
				handleEdit(row) {
					let r = {...row};//将row的属性给r，而不是引用
					this.ruleForm = r;
					this.dialogVisible = true;
				},
			      handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
			      },
			      handleCurrentChange(val) {
			        console.log(`当前页: ${val}`);
			      },
				  // handleUpdate(id){},
				submitForm(formName) {
					axios.put(`/type`,this.ruleForm).then(resp=>{
						if(resp.data){
							this.$message.success("修改成功");
						}else{
							this.$message.error("修改失败");
						}
						setTimeout(()=>{
							location.href = 'list-smallType.html';
						},1000);
					});
				},
				  handleDelete(id){
					  this.$confirm('你确定要删除该小类吗？, 是否继续?', '提示', {
					            confirmButtonText: '确定',
					            cancelButtonText: '取消',
					            type: 'warning'
					          }).then(() => {
								  axios.delete(`/type/smallType/${id}`).then(response=> {
									  if (response.data) {
										  this.$message({
											  type: 'success',
											  message: '删除成功!'
										  });
										  this.loadList();
									  } else {
										  this.$message.error("删除失败");
									  }
								  });

					          }).catch(() => {
					            this.$message({
					              type: 'info',
					              message: '已取消删除'
					            });          
					          });
				  },
				  tosave(){
					  location.href="save-smallType.html";
				  }
			}
		})
	</script>
</html>
